<template>
  <view class="u-page">
    <view class="head-info">
      <text class="title">蓝华工来了</text>
      <text class="tip">海量职位，工作无忧</text>
    </view>

    <view class="button-group">
      <view class="auth">
        <button class="org-cb" open-type="getUserInfo" @getuserinfo="loginByWx" withCredentials="true" />
        <u-button :customStyle="cStyle" shape="circle" text="微信授权登录"></u-button>
      </view>
      <view style="height: 32upx" />
      <u-button :customStyle="cStyle_" @click="closePage" shape="circle" text="取消返回"></u-button>
      <view class="tip">
        <u-checkbox-group v-model="isRead">
          <u-checkbox name="read"></u-checkbox>
        </u-checkbox-group>
        我已阅读并同意<a class="herf">《用户协议》</a>和<a class="herf">《隐私协议》</a>
      </view>
    </view>
  </view>
</template>

<script>
var Apis = {
  getWorkList: '/Open/Work/GetWorkList',
  getOpenId: '/Open/Auth/GetOpenId',
  GetPhoneNum: '/Open/GetPhoneNum',
}

import { mapGetters, mapActions } from 'vuex'
const log = console.log.bind(console)

export default {
  data() {
    return {
      isRead: [],
      cStyle: {
        position: 'absolute',
        top: 0,
        left: 0,
        'font-weight': 'bold',
        background: '#DDDDDD',
        color: '#999999',
      },
      cStyle_: {
        'font-weight': 'bold',
        color: '#999999',
      },
      descLis: {
        worker: '授权微信登录，只作为平台免密码登录的验证，不涉及个人隐私。',
        employer: '此功能为平台高级服务，需要联系平台获取相关授权，已获取授权，请授权登录并提交必要的信息',
      },
      avatarUrl: '',
      phone: '',
      title: '海量职位，工作无忧',
      guestContent: '',
    }
  },

  onLoad(opt) {},
  computed: {},
  mounted() {},

  methods: {
    ...mapActions({
      getToken: 'user/getToken',
      setWid: 'user/setWid',
    }),

    async uLogin() {
      return new Promise((resolve, reject) => {
        uni.login({
          provider: 'weixin',
          success: (res) => {
            resolve(res)
          },
          fail: (err) => {
            reject('授权登录失败：' + JSON.stringify(err))
          },
        })
      })
    },

    loginByWx(data) {
      // 1、返回当前微信用户信息，详情参考userInfo.json
      console.log(data)
      const { iv, encryptedData } = data.detail

      // 2、开始登录
      this.uLogin()
        .then((res) => {
          // 2-1、获取wid
          return this.$http.post(Apis.getOpenId, {
            codes: res.code,
            encryptedDataStr: encryptedData,
            iv: iv,
          })
        })
        .then((res) => {
          // 2-2、保存wid
          return this.setWid(res)
        })
        .then((res) => {
          // 2-3、用wid请求token
          return this.getToken({ Wid: res })
        })
        .then((res) => {
          if (res == 'Login') {
            // 2-4、返回Login即正常登录
            this.$back()
          } else if (res == 'NewUser') {
            // 3-1、返回NewUser 即首次登录，跳转到基本信息登记
            this.$openB('/pages/auth/index')
          }
        })
        .catch((err) => {
          log('err====:', err)
        })
    },
  },
}
</script>

<style lang="scss" scope>
.head-info {
  position: fixed;
  top: 30%;
  left: 0;
  width: 100%;
  height: 200upx;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    font-size: 38upx;
    font-weight: bold;
    color: #777777;
  }
  .tip {
    margin: 20upx 0 0 0;
    font-size: 24upx;
    color: #bbbbbb;
  }
}
.button-group {
  box-sizing: border-box;
  position: fixed;
  top: 56%;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24upx;
  .auth {
    position: relative;
    height: 70upx;
    width: 100%;
    .org-cb {
      width: 100%;
      height: 76upx;
      z-index: 999;
      background: rgba(255, 255, 255, 0);
    }
    .org-cb::after {
      border: 0px;
    }
  }

  .tip {
    margin: 22upx 0;
    font-size: 26upx;
    display: flex;
    justify-content: center;
    .herf {
      color: chocolate;
    }
  }
}
</style>
